<template>
	<div class="tableDiv">
		<el-table :data="menuData" style="width: 100%" :header-cell-style="{
			color: '#333333', fontFamily: 'PingFang SC', fontSize: '14px', fontWeight: 500, background: '#F4F8FF',
			borderBottom: '1px solid #B9DAF2'
		}" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" row-key="arsId" border
			:expand-row-keys="expands" :tree-props="{ children: 'children' }" ref="table">
			<el-table-column align='left' prop="arsName" label="名称" width="350" class-name="margin"></el-table-column>
			<el-table-column align="center" prop="arsType" label="类型" width="100">
				<template slot-scope="scope">
					<span v-if="scope.row.arsType === 'module'" size="small">目录</span>
					<span v-else-if="scope.row.arsType === 'url'" size="small" type="success">菜单</span>
					<span v-else-if="scope.row.arsType === 'button'" size="small" type="info">按钮</span>
					<span v-else-if="scope.row.arsType === 'href'" size="small" type="info">链接</span>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="orderBy" label="排序号" width="100"></el-table-column>
			<el-table-column align="center" prop="arsUrl" label="URL地址" show-overflow-tooltip></el-table-column>
			<el-table-column align="center" prop="permission" label="权限标识" show-overflow-tooltip></el-table-column>
			<el-table-column label="操作" width="160" align="center">
				<template slot-scope="scope">
					<el-button v-if="scope.row.arsType === 'url'" type="success" plain size="mini"
						@click="createResource(scope.row)">创建</el-button>
					<el-button v-if="scope.row.arsType === 'button' || scope.row.arsType === 'href'" type="warning"
						plain size="mini" @click="editResource(scope.row)">
						修改
					</el-button>
					<el-button v-if="scope.row.arsType === 'button' || scope.row.arsType === 'href'" type="danger" plain
						size="mini" @click="delResource(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--修改-->
		<el-dialog v-dialogDrag :title="title" :visible.sync="menu" :close-on-click-modal="false" @close="cancelMenu">
			<el-form ref="form" :model="form" label-width="20%" style="height: 200px; overflow-x: hidden;">
				<el-form-item label="名称">
					<el-col :span="16">
						<el-input size="small" v-model="form.arsName" placeholder="名称"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="上级菜单">
					<el-col :span="16">
						<el-input readonly size="small" v-model="parentStr" placeholder="上级菜单"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="类型">
					<el-col :span="8">
						<el-select :popper-append-to-body="false" v-model="form.arsType" placeholder="请选择" clearable
							size="small">
							<!-- <el-option label="module" value="module"></el-option>
						<el-option label="url" value="url"></el-option> -->
							<el-option label="button" value="button"></el-option>
							<el-option label="href" value="href"></el-option>
						</el-select>
					</el-col>
				</el-form-item>
				<!-- <el-form-item label="URL地址">
					<el-col :span="16"><el-input size="small" v-model="form.arsUrl" placeholder="可为空"></el-input></el-col>
				</el-form-item> -->
				<el-form-item label="权限标识">
					<el-col :span="16">
						<el-input size="small" v-model="form.permission" placeholder="路由path为'/index'则配index">
						</el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="排序号">
					<el-col :span="16">
						<el-input size="small" v-model="form.orderBy" placeholder="可为空"></el-input>
					</el-col>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button v-blur class="botton" @click="onSubmit" :loading="loadBtn">提 交</el-button>
				<el-button v-blur class="botton reset" @click="cancelMenu">取 消</el-button>
			</span>

		</el-dialog>
	</div>
</template>
<script>
	import api from '@/api/systemManagement/source.js'
	export default {
		name: 'SysResource',
		data() {
			return {
				loading: false,
				loadBtn: false,
				menu: false, //新增修改菜单
				title: '新增',
				menuData: [],
				expands: [],
				parentStr: '',
				form: {
					arsType: '',
					arsName: '',
					parentId: '',
					arsUrl: '',
					permission: '',
					orderBy: ''
				},
				params: {}
			};
		},
		created() {
			this.getResult();
		},
		methods: {
			// 获取资源
			getResult() {
				let param = {};
				api.getSysResourceList(param).then(res => {
						this.loading = false;
						this.menuData = res.data;
						this.expands.push(this.menuData[1].arsId)
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 新建
			createResource(row) {
				this.menu = true;
				this.title = '新建资源';
				this.parentStr = row.arsName;
				this.form.parentId = row.menuId;
				this.params = this.form;
				this.params.arsCreateTime = row.arsCreateTime;
				this.params.menuId = row.menuId;
			},
			// 新建修改
			onSubmit() {
				this.loadBtn = true
				api.addOrUpdateResource(this.params).then(res => {
						if (res.data.code == '0001') {
							this.$message({
								message: res.data.message,
								type: 'success'
							});
							this.loadBtn = false
							this.getResult();
							this.cancelMenu();
						} else {
							this.$message({
								message: res.data.message,
								type: 'error'
							});
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			cancelMenu() {
				this.menu = false;
				for (let k in this.form) {
					this.form[k] = '';
				}
			},
			// 修改
			editResource(row) {
				console.log(row);
				this.menu = true;
				this.title = '修改菜单';
				let data = JSON.stringify(row)
				this.form = JSON.parse(data)
				this.params = this.form;
				if (row.parentMenuName) {
					this.parentStr = row.parentMenuName;
				}
			},
			delResource(row) {
				this.$confirm('确认要删除么？').then(res => {

					const data = {
						id: row.arsId
					}
					api.deleteById(data).then(res => {
							if (res.data.code === '0001') {
								this.$message({
									message: res.data.message,
									type: 'success'
								});
								this.getResult();
							} else {
								this.$message({
									message: res.data.message,
									type: 'error'
								});
							}
						})
						.catch(err => {
							console.log(err);
						});
				});
			}
		}
	};
</script>
<style scoped lang="scss">
	/deep/ .el-button:active {
		color: #606266;
	}

	/deep/ .el-button:hover {
		color: #606266;
	}

	/deep/ .el-table__expand-icon>.el-icon {
		margin-left: -10px;
		margin-top: -9px;
		font-size: 16px;
	}

	/deep/.el-dialog__footer {
		text-align: center;
	}

	.botton {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		vertical-align: middle;
		line-height: 1px;
		width: 84px;
		height: 32px;
		background: linear-gradient(270deg, #3D80FF, #3DAFFF);
		border-radius: 5px;
		padding: 0;
	}

	.reset {
		background: linear-gradient(270deg, #C7CBCC, #ADAFB1);
	}

	/deep/.el-table--border .el-table__cell,
	.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
		border-right: 0px solid #EBEEF5;
	}

	/deep/ .el-table .cell {
		text-align: inherit;
	}

	/deep/td.margin .cell {
		text-align: left;
		margin-left: 40px;
	}

	/deep/ .el-select-dropdown {
		position: absolute !important;
		top: 50px !important;
		left: 0 !important;
	}
</style>
